<template>
  <div class="sorts">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>所有分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白板 -->
    <el-card class="blog-box">
      <el-row>
        <el-col :span="3" :offset="1"><h1>所有分类</h1></el-col>
        <el-col :span="4" :offset="16">
          共<span class="totle"> {{ sortNum }} </span>个</el-col
        >
      </el-row>
      <el-divider></el-divider>
      <el-button
        type="primary"
        plain
        v-for="(sort, index) in sorts"
        :key="index"
        @click="showDetail(sort.id)"
        >{{ sort.name + " | " + sort.blogNum }}</el-button
      >
    </el-card>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <h1>标签:</h1>
      <el-divider></el-divider>
      <el-tag>{{ sort.name }}</el-tag>
      <el-divider></el-divider>
      <h1>该标签下的博客:</h1>
      <el-table
        ref="blogTable"
        :data="blogs"
        highlight-current-row
        :show-header="false"
        style="width: 100%"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="title" width="300"> </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="pageInfo.totle"
        @current-change="handleChange"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sorts: [],
      sortNum: 0,
      sort: {},
      pageInfo: {},
      dialogVisible: false,
      blogs: [],
    };
  },
  methods: {
    async getAllSorts() {
      var d = await this.$http.get("sorts");
      this.sorts = d.data.sorts;
      this.sortNum = d.data.sortNum;
    },
    async getBlogBySid(id, currentPage) {
      var d = await this.$http.get("sblogs/" + id + "/" + currentPage);
      this.blogs = d.data.blogs;
      this.pageInfo = d.data.pageInfo;
    },
    async getSortById(id) {
      var d = await this.$http.get("sort/" + id);
      this.sort = d.data;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    showDetail(id) {
      this.getSortById(id);
      this.getBlogBySid(id, 1);
      this.dialogVisible = true;
    },
    handleChange(currentPage) {
      this.getBlogBySid(this.sort.id, currentPage);
    },
  },
  mounted: function () {
    this.getAllSorts();
  },
};
</script>
<style scoped>
.el-button {
  margin: 10px 10px;
}
.totle {
  color: red;
  font-size: 1.2em;
}
</style>